<template>
  <div class="playMv">
    <router-link tag="div" to="/recommend" class="goabck"
      ><span class="iconfont icon-zuojiantou"></span
    ></router-link>
    <div class="video">
      <video controls :src="mvUrl"></video>
    
      <div class="review-box">
        <van-tabs v-model="activeName" @click="getSameMv">
          <van-tab title="最新评论" name="a">
            <div class="review">
              <div class="text">评论区</div>
              <div class="item" v-for="item in comments" :key="item.commentId">
                <div class="img">
                  <img :src="item.user.avatarUrl" alt="" />
                </div>
                <div class="content">
                  <div class="name">{{ item.user.nickname }}</div>
                  <div class="time">{{ changeTime(item.time) }}</div>
                  <div class="content-text">{{ item.content }}</div>

                  <div class="praise">
                    {{ item.likedCount }}
                    <span
                      :class="[
                        'iconfont ',
                        'icon-dianzan',
                        { changePraise: item.liked },
                      ]"
                      @click="praiseFun(item)"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="相关MV" name="b">
              <div class="item" v-for="item in sameMv" :key="item.id" @click="PlaySameMv(item.id)">
                  <div class="img">
                      <img :src="item.cover" alt="">
                  </div>
                  <div class="content">
                      <div class="mv_name">{{item.name}}</div>
                      <div class="artistName">{{item.artistName}}</div>
                  </div>
              </div>
          </van-tab>
        </van-tabs>
        <div class="review-ipt">
          <input
            class="ipt-box"
            v-model="myreview"
            placeholder="也许这次是你上热门"
            type="text"
          />
          <div class="btn" @click="reviewFun">发送</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMvUrl,getSimiMv } from "../../api/recommend";
import {
  getCommentNew,

  getCommentLike,
  getComment,
} from "../../api/base";
export default {
  data() {
    return {
      mvId: null,
      mvUrl: null,

      activeName: "a",
      comments: [], //最新评论
      myreview: "", //我的评论
      sameMv:null, //相似MV
    };
  },
  methods: {
   
    getSameMv(){
        getSimiMv({mvid:this.mvId}).then(data=>{
            console.log(data);
            this.sameMv = data.mvs
        })
    },

    // 点击播放相似mv
    PlaySameMv(id){
      this.mvId = id
      // 调用mv接口 拿到播放地址
      getMvUrl({ id: this.mvId}).then((data) => {
      this.mvUrl = data.data.url;
      });

      // 调用最新评论接口
     getCommentNew({ id: this.mvId, type: 1, sortType: 3 }).then((data) => {
      this.comments = data.data.comments;
      });

      this.getSameMv();
      
    },

    // 把时间戳转为正常格式
    changeTime(time) {
      return new Date(time).toLocaleDateString();
    },

    // 点赞
    praiseFun(item) {
     
      item.liked = !item.liked;
      item.likedCount =
        item.liked == true ? item.likedCount + 1 : item.likedCount - 1;
      getCommentLike({
        id: this.mvId,
        cid: item.commentId,
        t: 1,
        type: 1,
      }).then(() => {});
    },

    // 发表评论
    reviewFun() {
      getComment({ t: 1, type: 1, id: this.mvId, content: this.myreview }).then(
        (data) => {
          console.log(data);
          if (data) {
            console.log(123124);
          }
        }
      );
      // 清空输入框
      this.myreview = "";
    },
  },

  created() {
    this.mvId = this.$route.params.id;
    

    // 调用mv接口 拿到播放地址
    getMvUrl({ id: this.mvId }).then((data) => {
      this.mvUrl = data.data.url;
    });

    // 调用最新评论接口
    getCommentNew({ id: this.mvId, type: 1, sortType: 3 }).then((data) => {
      this.comments = data.data.comments;
    });
  },
};
</script>


<style lang="less">
.playMv {
  position: relative;
  .goabck {
    width: 30px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 16px;
    z-index: 100;
    .icon-zuojiantou{
      color: #ffffff;
      font-size: 20px;
    }
  }
  .video {
    width: 100%;
    margin: 0 auto;

    video {
      width: 100%;
      height: 210px;
    }
 
    
    .review-box {
        position: relative;
        .review-ipt {
          width: 100%;
          height: 60px;
          background-color: rgba(255, 255, 255, 0.9);
          position: fixed;
          bottom: 0px;
          left: 0px;
          display: flex;
          align-items: center;
          .ipt-box {
            height: 25px;
            border: 0px;
            padding: 0px;
            margin-left: 30px;
            font-size: 14px;
            flex: 1;
          }

          .btn {
            width: 40px;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
          }
        }
        .review {
          width: 100%;
          // height: 600px;
          padding-left: 10px;
          padding-top: 30px;
          box-sizing: border-box;
          .text {
            margin-bottom: 10px;
          }
          .item {
            display: flex;
            margin-bottom: 20px;
            .img {
              width: 40px;
              height: 40px;
              background-color: red;
              margin-right: 8px;
              border-radius: 50%;
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }
            }
            .content {
              flex: 1;
              border-bottom: 1px solid #ced5d5;
              padding-bottom: 10px;
              position: relative;
              .time {
                font-size: 12px;
              }
              .content-text {
                padding-right: 5px;
                box-sizing: border-box;
                margin: 10px 0px;
              }
              .praise {
                position: absolute;
                top: 0px;
                right: 8px;
                .changePraise {
                  color: red;
                }
              }
            }
          }
        }
        .item{
          width: 100%;
          height: 100px;
          padding: 0 10px;
          display: flex;
          margin-bottom: 10px;
          box-sizing: border-box;
          
          .img{
            width: 100px;
            height: 100px;
            img{
               width: 100px;
               height: 100px;
               background-color: red;
               border-radius: 4px;
            }
          }
          .content{
            margin-left: 8px;
            flex: 1;
            .mv_name{
              font-weight: bold;
              margin: 10px 0;
            }
            .artistName{
              font-size: 14px;
              color: #727373;
            }
          }
        }
    }
    
  }
}
</style>